本文包含以下內容
如果先前有學習過boostrap5的人應該對於layout排版布局並不陌生,他們基於w3c所制定的flex-box的設計來達到靈活的排版,每個寬度是固定的分比,在Material design也有介紹關於Responsive layout grid的介紹,與bootstrp一樣在MUI的設計也是預設12欄的設計
prop名稱 | 原名 | px值 |
---|---|---|
xs | extra-small | 0px |
sm | small | 600px |
md | medium | 900px |
lg | large | 1200px |
xl | extra-large | 1536px |
我們引入Grid後,然後再父層的Grid component添加container作為容器使用,在子層的時候添加item作為props使用,以物件的形式傳入Grid component裡面,由於是12欄的設計,當我們撰寫xs={12}
也就是相當於佔滿12欄,同理我們撰寫xs={8}
就是相當佔滿8欄
import React from "react";
import Grid from "@mui/material/Grid";
import "./Div.css";
const BasicGrid = () => {
return (
<>
<Grid container>
<Grid item xs={12}>
<div className="item">12</div>
</Grid>
<Grid item xs={8}>
<div className="item">8</div>
</Grid>
</Grid>
</>
);
};
export default BasicGrid;
如圖
我們可以透過設置斷點的方式讓滿不同的螢幕寬度的時候佔滿的欄數發生變化,在一個Grid同時設置xs={12}
和md={6}
的時候,螢幕在大於900px的時候會佔滿的欄數就是6格,觀看以下程式碼
import React from "react";
import Grid from "@mui/material/Grid";
import "./Div.css";
const BasicGrid = () => {
return (
<>
<Grid container>
<Grid xs={12} md={6}>
<div className="item">Hello</div>
</Grid>
<Grid xs={12} md={6}>
<div className="item">World</div>
</Grid>
</Grid>
</>
);
};
export default BasicGrid;
當在大於900px螢幕的時候,我們會佔滿12欄
在小螢幕的時候就會佔滿全部
預設十二欄,但我們可以在父層的container撰寫columns,在子層的地方撰寫欄數就會一樣依照比例切割,例如當我們父層的container撰寫sm的斷點設置成8,在子層的item下斷點4的話,就會依照螢幕切分成4/8和4/8的方式佔滿整個螢幕也就是各一半
觀看以下程式碼
import React from "react";
import Grid from "@mui/material/Grid";
import "./Div.css";
const BasicGrid = () => {
return (
<>
<Grid container columns={{ xs: 4, sm: 8, md: 12 }}>
<Grid item xs={2} sm={4} md={4}>
<div className="item">Hello</div>
</Grid>
<Grid item xs={2} sm={4} md={4}>
<div className="item">World</div>
</Grid>
<Grid item xs={2} sm={4} md={4}>
<div className="item">Hello</div>
</Grid>
<Grid item xs={2} sm={4} md={4}>
<div className="item">World</div>
</Grid>
<Grid item xs={2} sm={4} md={4}>
<div className="item">Hello</div>
</Grid>
<Grid item xs={2} sm={4} md={4}>
<div className="item">World</div>
</Grid>
</Grid>
</>
);
};
export default BasicGrid;
在md以上的時候是12欄
在sm~md的時候由於父組件總欄數是8,即便在子組件的xs設置4還是會佔滿一半的螢幕
同理在xs的時候總欄數是4,即便在子組件設置2也是會佔滿一半的螢幕
在官方網站近期推出了Grid系統v2版本,改善了幾項問題,首先不需要在子元素撰寫item屬性以及修復了一些已知問題,對於所有的容器給定了負邊界預設值,另外也可了預防滾動條的方式。
目前Grid version 2正在實作中,預計下一個主要版的時候將會棄用原先的Grid1
以下翻譯自官方遷移Grid 2的原因
主要列出以下幾點
import Grid from '@mui/material/Unstable_Grid2';